<template>
  <div class="w-100 h-100">
    <containTemplete
      :title="''"
      :secondTitles="['设备隐患处理', '设备隐患列表', '市政管网缺陷情况']"
      :slotWidth="[33, 33, 33]"
    >
      <template #left>
        <sbyhcl :selectValue="left_value" />
      </template>
      <template #middle>
        <div class="w-100 h-100">
        <sbyhlb :selectValue="middle_value"></sbyhlb>
      </div>
      </template>
      <template #right>
        <div class="w-100 h-100">
          <sbjbzt></sbjbzt>
        </div>
      </template>

      <template #left_control>
        <proSelect
          :optionsData="useOptions().deviceList"
          :defaultSelectValue="0"
          v-model:select-value="left_value"
          :width="150"
        >
        </proSelect>
      </template>

      <template #middle_control>
        <el-date-picker
          v-model="middle_value"
          type="month"
          placeholder="选择月"
          style="width: 150px"
          format="YYYY/MM"
          value-format="YYYY-MM"
        />
      </template>
    </containTemplete>
  </div>
</template>
<script setup lang="ts">
import containTemplete from "@/components/project/containTemplete.vue";
import sbjbzt from "./sbjbzt.vue";
import jdsbslpm from "./jdsbslpm.vue";
import { useOptions } from "@/hook/useOptions";
import sbyhcl from "./sbyhcl.vue";
import sbyhlb from "./sbyhlb.vue";
import moment from "moment";

const left_value = ref(0);

const middle_value = ref("2024-06");
</script>

<style scoped lang="less"></style>
